<template>
  <div class="wrap">
	<!-- kv -->
	<div class="kvBox">
		<!-- <img src="../assets/bg_01.jpg" alt /> -->
		<carousels/>
	</div>
	<!-- 直播 -->
	<div class="liveBox">
		<img src="../assets/bg_02.jpg" alt />
		<!-- 直播结构 -->
		<div id="player_top">
			<img src="../assets/pic_player1.jpg" alt="">
		</div>
	</div>
	<!-- 点播 -->
	<div class="playerBox">
		<img src="../assets/bg_03.jpg" alt />
	</div>
	<!-- 车型亮点 -->
	<div class="highlightBox">
		<!-- <img src="../assets/bg_04.jpg" alt /> -->
		<!-- 按钮 -->
		<div class="btnsBox">
			<div class="btn_light btn_light1" :class="{active:btnActive1}" @click="onBtnClick(1)">
				
			</div>
			<div class="btn_light btn_light2" :class="{active:btnActive2}" @click="onBtnClick(2)">
				
			</div>
			<div class="btn_light btn_light3" :class="{active:btnActive3}" @click="onBtnClick(3)">
				
			</div>
		</div>
		<carousels-mid class="carousel_mid" ref="midSwiper"/>
	</div>
	<!-- 试驾预约 -->
	<div class="testDriveBox">
		<!--填写区域-->
		<div class="driveBg">
			<input v-model="username" type="" name="" class="username" value="" @focus="onNameFocus" @blur="onNameBlur">
			<input v-model="userphone" name="" class="phone" value="" maxlength="11" type="" @focus="onPhoneFocus" @blur="onPhoneBlur">
			<select id="pro" class="province selectInit" v-model="val_p" @change="onProChange"></select>
			<p class="provinceP">{{val_p}}</p>
			<select id="city" class="city selectInit" v-model="val_c"></select>
			<p class="cityP">{{val_c}}</p>
		</div>
		<div class="confirmBox" @click="onBoxClick">
			<div class="checkBox" :class="{yes:isActive, no:!isActive}" >

			</div>
		</div>
		<!-- 查询浮层按钮 -->
		<div class="btn_check btn_check1">
			<a href="https://www.bitauto.com/topics/adtopic/agreement_con/">
			</a>
		</div>
		<!--提交-->
		<div class="btn_confirm btn_click" @click="onConfirm">
			<img src="../assets/btn_confirm.png" alt="">
		</div>
		<img src="../assets/bg_05.jpg" alt />
	</div>
	<!-- 精美车图 -->
	<div class="carPicBox">
		<carousels-bot class="carousel_bot"/>
		<!-- <img src="../assets/bg_06.jpg" alt=""> -->
		<div class="btn_bottom">
			<a href="https://www.lynkco.cn/mall/choose-sku?vehicle=03&fcId=18">
				<img src="../assets/btn_bottom.jpg" alt="">
			</a>
		</div>
	</div>
	<pop-up v-show="isPopShow" @sureClick="onSureClick">
		{{message}}
	</pop-up>
  </div>
  
</template>

<script>
// @ is an alias to /src
import carousels from '@/components/carousels.vue'
import carouselsMid from '@/components/carouselsMid.vue'
import carouselsBot from '@/components/carouselsBot.vue'
import popUp from '@/components/popUp.vue'
import axios from 'axios';
import linkageFn from '../api/linkage';


export default {
	name: 'Home',
	components: {
		carousels,
		carouselsMid,
		carouselsBot,
		popUp
	},
	data:function(){
		return{
			btnActive1:true,
			btnActive2:false,
			btnActive3:false,

			username:"请输入姓名",
			userphone:"请输入11位电话",
			val_p:"请选择省份",
			val_c:"请选择市/区",
			isActive: false,

			message:"请填入",
			isPopShow:false
		}
	},
	methods:{
		//亮点轮播图按钮
		onBtnClick(num){
			if(num == 1){
				this.btnActive1 = true;
				this.btnActive2 = false;
				this.btnActive3 = false;

				this.$refs.midSwiper.swiper.slideTo(1, 500, false);
				//console.log(this.$refs.midSwiper.swiper.slideTo);
			}else if(num == 2){
				this.btnActive2 = true;
				this.btnActive1 = false;
				this.btnActive3 = false;

				this.$refs.midSwiper.swiper.slideTo(2, 500, false);
			}else if(num == 3){
				this.btnActive3 = true;
				this.btnActive1 = false;
				this.btnActive2 = false;

				this.$refs.midSwiper.swiper.slideTo(3, 500, false);
			}
		},
		//对钩
		onBoxClick(){
			this.isActive = !this.isActive;
		},
		//姓名操作
		onNameFocus(){
			if(this.username == "请输入姓名"){
				this.username = "";
			}
		},
		onNameBlur(){
			if(this.username == ""){
				this.username = "请输入姓名";
			}
		},
		//电话操作
		onPhoneFocus(){
			if(this.userphone == "请输入11位电话"){
				this.userphone = "";
			}
		},
		onPhoneBlur(){
			if(this.userphone == ""){
				this.userphone = "请输入11位电话";
			}
		},
		//省份操作
		onProChange(){
			this.val_c = "请选择市/区";
		},

		//确认按钮点击
		onConfirm(){
			//姓名
			var namepreg = /^([a-zA-Z]{1,20}|[\u4e00-\u9fa5]{1,10}|[\u4e00-\u9fa5a-zA-Z]{1,20})$/;
			//手机
			var regTel =  /^(((17[0-9]{1})|(13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[0-9]{1})|(16[6]{1})|(19[89]{1}))+\d{8})$/;


			
			if(this.username == "请输入姓名"){
				this.isPopShow = true;
				this.message = "请填入姓名";
				return false
			}else if(this.username !=""){
				var nameTest = namepreg.test(this.username);
				if(nameTest == false){
					this.isPopShow = true;
					this.message ="请填入正确的姓名";
					return false;
				}
			}
			
			if(this.userphone == "请输入11位电话"){
				this.isPopShow = true;
				this.message = "请输入11位电话";
				return false
			}else if(this.userphone != ""){ 
				var telTest = regTel.test(this.userphone);
				if(telTest == false){
					this.isPopShow = true;
					this.message ="请填入正确的手机号";
					return false;
				}
			}
			
			if(this.val_p == "请选择省份"){
				this.isPopShow = true;
				this.message = "请选择省份";
				return false
			}else if(this.val_c == "请选择市/区"){
				this.isPopShow = true;
				this.message = "请选择市/区";
				return false
			}else if(this.isActive == false){
				this.isPopShow = true;
				this.message = "请勾选我已阅读并同意《隐私政策》";
				return false
			}else{
				this.isPopShow = true;
				this.message = "提交成功";
				console.log(this.username,this.userphone,this.val_p,this.val_c);

				this.username = "请输入姓名";
				this.userphone = "请输入11位电话";
				this.val_p = "请选择省份";
				this.val_c = "请选择市/区";
				this.isActive = false;
			}
		},

		onSureClick(){
			this.isPopShow = false;
		}
	},
	//构建后
	mounted(){
		//axios请求
		// eslint-disable-next-line no-unused-vars
		axios.get("https://yc.static.qq.com/?service=App.Jun_CountComApi.Go&keys=namea1389bb19c9").then(function(res){
			//console.log(res.data.number);
		});
		//console.log(linkageFn);
		linkageFn.linkage(linkageFn.config);
	}
}
</script>

<style scoped lang="scss">
.wrap {
  position: relative;
  width: 750px;
  height: auto;
  .kvBox {
	position: relative;
	width: 750px;
	height: 1229px;
	background-color: #000000;
	
  }
  .liveBox {
	position: relative;
	width: 750px;
	height: 1133px;
	#player_top{
		position: absolute; width: 692px; height: 415px; left: 29px; top: 83px;
	}
  }
  .playerBox {
	position: relative;
	width: 750px;
	height: 606px;
  }
  .highlightBox {
	position: relative;
	width: 750px;
	height: 822px;
	background-image: url(../assets/bg_04.jpg);
	.btnsBox{
		position: relative; 
		width: 720px; 
		height: 126px; 
		padding-top: 123px;
		padding-left: 30px;
		.btn_light{
			width: 208px; height: 126px; float: left; margin-right: 30px; background-repeat: no-repeat; background-size: 208px 216px; background-position: 0 -126px;
		}
		.btn_light1{background-image: url(../assets/btn_light1.png);}
		.btn_light2{background-image: url(../assets/btn_light2.png);}
		.btn_light3{background-image: url(../assets/btn_light3.png);}
		.active.btn_light{background-position: 0 0;}
	}
	.carousel_mid{
		margin-top: 23px;
	}
  }
  .testDriveBox{
	position: relative;
	width: 750px;
	height: 852px;
	.driveBg{position: absolute; width: 750px; height: 832px; left: 0px; top: 0px;}
	.username {
		position: absolute;
		left: 85px;
		top: 123px;
		width: 506px;
		height: 74px;
		line-height: 74px;
		border: none;
		background-color: transparent;
		font-size: 30px;
		color: #FFFFFF;
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
		display: block;
		-webkit-user-select:auto;
		user-select:auto;
	}
	.phone {
		position: absolute;
		left: 85px;
		top: 233px;
		width: 506px;
		height: 74px;
		line-height: 74px;
		border: none;
		background-color: transparent;
		font-size: 30px;
		color: #FFFFFF;
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
		display: block;
		-webkit-user-select:auto;
		user-select:auto;
	}
	.province{opacity: 0;filter: alpha(opacity=0);z-index: 2;position: absolute;left: 85px;top: 344px;width:636px; line-height:74px; height:74px; border:none; background-color:transparent;font-size: 30px; appearance:none;-moz-appearance:none; /* Firefox */-webkit-appearance:none; /* Safari å’Œ Chrome */}
	.provinceP{z-index: 1;position: absolute;left: 85px;top: 344px;width:506px; line-height:74px; height:74px; border:none; background-color:transparent;color: #FFFFFF;font-size: 30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	.city{opacity: 0;filter: alpha(opacity=0);z-index: 2;position: absolute;left: 85px;top: 454px;width:636px; line-height:74px; height:74px; border:none; background-color:transparent;font-size: 30px; appearance:none;-moz-appearance:none; /* Firefox */-webkit-appearance:none; /* Safari å’Œ Chrome */}
	.cityP{z-index: 1;position: absolute;left: 85px;top: 454px;width:506px; line-height:74px; height:74px; border:none; background-color:transparent;color: #FFFFFF;font-size: 30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	
	.confirmBox{position: absolute;width: 60px; height: 60px; left: 30px; top: 567px;}
	.checkBox{cursor: pointer;position: absolute;width: 30px; height: 30px;left: 0px;top: 0px;background-image: url(../assets/confirm.png); background-repeat: no-repeat; background-size: 30px 60px;}
	.no{background-position: 0 0;}
	.yes{background-position: 0 100%;}
	.btn_confirm{position: absolute; width: 389px; left: 180px; top: 680px;}

	.btn_check1 {
			position: absolute;
			width: 135px;
			height: 37px;
			left: 236px;
			top: 568px;
	}

  }
  .carPicBox{
	position: relative;
	width: 750px;
	height: 793px;
	background-image: url(../assets/bg_06.jpg);
	.carousel_bot{
		padding-top: 121px;
	}
	.btn_bottom{
		position: absolute; 
		width: 750px; 
		left: 0; 
		top: 643px;
	}
  }
}
</style>
